import { Routes, Route, useNavigate } from 'react-router-dom'
import React, { useState, useCallback, useMemo } from 'react'
import Home from './manage/Home';
import Category from './manage/Category';
import CategoryEdit from './manage/category/Edit';
import CategoryList from './manage/category/List';
import Answer from './manage/Answer';
import AnswerList from './manage/answer/List';
import AnswerAdd from './manage/answer/Add';
import User from './manage/User';
import UserList from './manage/user/List';
import UserAdd from './manage/user/Add';
import UserEdit from './manage/user/Edit';
import Question from './manage/Question';
import QuestionList from './manage/question/List';
import QuestionAdd from './manage/question/Add';
import QuestionAudit from './manage/question/Audit';
import QuestionDay from './manage/question/Day';
import QuestionEdit from './manage/question/Edit'




import { withLogin } from '../utils/hoc'
// import store from '../store';
import { connect } from 'react-redux'




import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    TeamOutlined,
    UserOutlined,
    FileUnknownOutlined,
    UnorderedListOutlined,
    BarsOutlined,
    PartitionOutlined,
    HomeOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Row, Col, Button, Avatar, Image } from 'antd';

const { Header, Sider, Content } = Layout;
const baseUrl = '/manage'

function Manage(props) {
    console.log('manage_props', props);
    const [collapsed, setCollapsed] = useState(false);

    // 实现菜单的点击跳转功能
    const navigate = useNavigate()
    const changeMenu = useCallback(({ item, key, keyPath, domEvent }) => {
        console.log('changeMenu', key, keyPath)
        // key: /list
        // keyPath: ['/list','/goods']
        // 目标path: /manage/goods/list

        // const path = baseUrl + keyPath.reverse().join('');console.log('path',path)
        const path = baseUrl + key;
        navigate(path)
    }, [])



    // 实现点击退出登录功能
    const logout = useCallback(function () {
        props.dispatch({ type: 'logout' })
        // props.logout()
        navigate('/login')
    }, [])


    return (
        <Layout className='manage'>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo"></div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['/home']}
                    onClick={changeMenu}
                    items={[
                        {
                            key: '/home',
                            icon: <HomeOutlined />,
                            label: '首页',

                        },
                        {
                            key: '/question',
                            icon: <UnorderedListOutlined />,
                            label: '面试题管理',
                            children: [
                                {
                                    key: '/question/list',
                                    label: '面试题列表',
                                },
                                {
                                    key: '/question/add',
                                    label: '添加面试题',
                                },
                                {
                                    key: '/question/audit',
                                    label: '面试题审核',
                                },
                                {
                                    key: '/question/day',
                                    label: '当日面试题',
                                },

                            ]
                        },

                        {
                            key: '/user',
                            icon: <TeamOutlined />,
                            label: '用户管理',
                            children: [
                                {
                                    key: '/user/list',

                                    label: '用户列表',
                                },
                                {
                                    key: '/user/add',

                                    label: '添加用户',
                                },
                            ]
                        },
                        {
                            key: '/category',
                            icon: <PartitionOutlined />,
                            label: '分类管理',
                            children: [
                                {
                                    key: '/category/list',
                                    label: '分类列表',
                                },

                            ]
                        },
                        {
                            key: '/answer',
                            icon: <FileUnknownOutlined />,
                            label: '答案管理',
                            children: [
                                {
                                    key: '/answer/list',
                                    label: '答案列表',
                                },
                                {
                                    key: '/answer/add',
                                    label: '添加答案',
                                },

                            ]
                        },



                    ]}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                        padding: 0,
                    }}
                >

                    <Row gutter={16} style={{ marginRight: 0 }}>
                        <Col span={6}>

                            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick: () => setCollapsed(!collapsed),
                            })}
                        </Col>
                        <Col span={18} className='text-right'>
                            <Avatar style={{ marginRight: '15px' }}
                                src={
                                    <Image
                                        src="https://joeschmoe.io/api/v1/random"
                                        style={{
                                            width: 25,
                                        }}
                                    />
                                }
                            />
                            <span>{props.user.username}</span> <Button type="link" onClick={logout}>退出</Button>
                        </Col>

                    </Row>

                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    <Routes>
                        <Route path='home' element={<Home />} />
                        {/* 面试题管理 */}
                        <Route path='question' element={<Question />}>
                            <Route path='list' element={<QuestionList />} />
                            <Route path='add' element={<QuestionAdd />} />
                            <Route path='audit' element={<QuestionAudit />} />
                            <Route path='day' element={<QuestionDay />} />
                            <Route path=':id' element={<QuestionEdit />} />
                        </Route>
                        {/* 分类管理 */}
                        <Route path='category' element={<Category />} >
                            <Route path='list' element={<CategoryList />} />
                            <Route path=':id' element={<CategoryEdit />} />
                        </Route>

                        {/* 用户管理 */}
                        <Route path='user' element={<User />} >
                            <Route path='list' element={<UserList />} />
                            <Route path='add' element={<UserAdd />} />
                            <Route path=':id' element={<UserEdit />} />

                        </Route>
                        {/* 答案管理 */}
                        <Route path='answer' element={<Answer />} >
                            <Route path='list' element={<AnswerList />} />
                            <Route path='add' element={<AnswerAdd />} />

                        </Route>
                    </Routes>
                </Content>
            </Layout>
        </Layout>)
}


Manage = withLogin(Manage)//这个是进行鉴权的


// 利用react_redux提供的高阶组件获取仓库的共享的数据

// 映射Redux状态到组件的props
const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}



Manage = connect(mapStateToProps)(Manage)

export default Manage;